<template>
    <div>
        <van-nav-bar title="标题" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="fieldValue" is-link readonly label="城市" placeholder="选择城市"
                    @click="showPicker = true" />
                <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
                    <van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false"
                        @confirm="onConfirm" />
                </van-popup>
                <van-field v-model="home" name="home" label="号码" placeholder="号码"
                    :rules="[{ pattern, message: '请填写号码' }]" />
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" @click="yzm">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import router from '@/router';
import { ref } from 'vue';
import { loginApi } from "@/api/api";
import { showSuccessToast, showFailToast } from 'vant';
const username = ref('');
const password = ref('');
const home = ref('')
const sms = ref('')
let time = ref(0)
let timer;
let pattern = /^1[3-9]\d{9}$/
const yzm = () => {
    sms.value = Math.floor(Math.random() * 1000000)
}
const onSubmit = () => {
    router.push('/home')
};
const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const fieldValue = ref('');
    const showPicker = ref(false);
    const onConfirm = ({ selectedValues, selectedOptions }) => {
      showPicker.value = false;
      pickerValue.value = selectedValues;
      fieldValue.value = selectedOptions[0].text;
    };

    
</script>

<style lang="scss" scoped></style>